<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局父子项常见属性</title>
</head>
<style>
    /* 布局原理:通过给父盒子添加flex属性,来达到控制子盒子的位置和排列方式 */
    div {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: pink;


        /* 默认的主轴是row：X轴 ，那么Y轴就是侧轴*/
        /* 元素是跟着主轴来排列的 */
        flex-direction: row;
        /* row-reverse翻转，从右到左 */
        /* flex-direction: row-reverse; */
        /* 如果把主轴设置为Y轴吗，那么X轴就成了侧轴 */
        /* flex-direction: column; */
        /* 翻转，从下到上 */
        /* flex-direction: column-reverse; */


        /* justify-content是设置主轴上子元素的排列方式 默认是flex-start 左对齐  flex-end 右对齐 
        让子元素居中对齐 center
        让子元素平分剩余空间 space-around:给每个子元素给上相同的左右margin值
        space-between 先两边贴边，再平分剩余空间 importent
        注意！！！使用之前一定要确定好主轴是哪个 */
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* justify-content: center; */
        /* justify-content: space-around; */
        justify-content: space-between;



        /* flex 布局中，子元素默认是不换行的，如果装不下，会缩小子元素的宽度，放到父元素里面 nowrap */
        /* flex-wrap: nowrap; */
        /* flex-wrap 设置子元素是否换行 */
        flex-wrap: wrap;
        /* 因为有了换行,现在侧轴上控制子元素的对齐方式改成align-content */


        /* 单行 */
        /* align-items设置侧轴上的子元素排列方式(单行) */
        /* 默认是Y轴上的排列方式 */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* 拉伸stretch,但使用时子盒子不要给高度 */
        /* align-items: stretch; */


        /* 多行 */
        /* align-content设置侧轴上的子元素排列方式(多行) */
        /* 只是适用于子项出现换行的情况,在单行是没有效果的!! */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;


        /* 合写方法flex-flow */
        /* flex-flow: 是flex-direction和flex-wrap属性的复合效果(主轴方向和是否换行列) */
        /* flex-direction: column;
        flex-wrap: wrap;
        可以合写成 */
        /* flex-flow: column wrap; */
    }

    div span {
        width: 150px;
        height: 100px;
        background-color: aliceblue;
        margin: 5px;

        /* flex属性,定义子项目分配剩余空间,用flex来表示占多少份数 */
        /* flex: <number>; */
        /* flex: default / 0; */
        /* flex: 1; */


    }
</style>

<body>
    <div>
        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
        <span>9</span><span>10</span>
    </div>


</body>

</html>